<template>
	<view class="content">
		<view v-for="(item,index1) in list" :key='index1'  class="">
			<view class="product-box">
				<!-- <image class="product-img" :src="item.img" mode="widthFix"></image> -->
				<view class="product-info">
					<view class="one">
						<image class="product-img" :src="item.img" mode="widthFix"></image>
						<view class="content-one">
							<view class="time">2021/07/26</view>
							<view class="address">
								<view>
									{{item.name}} 
								</view>
								<view>
									{{item.address}}
								</view>
							</view>
						</view>
						<view class="money">
							+506.33
						</view>
					</view>
					<veiw class='two'>
						<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/uploads/20210730/21af5ddd0ae6d19b5c5eee5e79ebe31d.png" mode="widthFix"></image> 
						<view class="">
							{{item.title}}
						</view>
						<view class="">
							{{item.NG}} 
						</view>
						<view class="">
							{{item.rong}}
						</view>
					</veiw>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	   
	    data() {
	        return {
	            items: ['全部', '在线','离线', '异常'],
	            current: 0,
				list:[
					{
						"img":"http://yunzhidun.oss-cn-beijing.aliyuncs.com/uploads/20210730/6991bbb68cdbe23bcc1ceae0de4e6702.png",
						"title":"OTWXTH7DHX89NHL",
						"name":'金巢云',
						"address":'河北联通',
						"NG":'4G流量',
						"rong":"4T+500G",
						"status":1,
						"info":"在线"
					},
					{
						"img":"http://yunzhidun.oss-cn-beijing.aliyuncs.com/uploads/20210730/6991bbb68cdbe23bcc1ceae0de4e6702.png",
						"title":"OTWXTH7DHX89NHL",
						"name":'金巢云',
						"address":'河北联通',
						"NG":'4G流量',
						"rong":"4T+500G",
						"status":0,
						"info":"离线"
					},
					{
						"img":"http://yunzhidun.oss-cn-beijing.aliyuncs.com/uploads/20210730/6991bbb68cdbe23bcc1ceae0de4e6702.png",
						"title":"OTWXTH7DHX89NHL",
						"name":'金巢云',
						"address":'河北联通',
						"NG":'4G流量',
						"rong":"4T+500G",
						"status":-1,
						"info":"异常"
					},
				]
	        };
	    }
	}
</script>

<style lang="less" scoped>
	.content{
		padding: 50rpx;
	}
	.product-box{
		display: flex;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		.product-img{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
		
		.product-info{
			width: 100%;
			.one{
				display: flex;
				justify-content: space-between;
				
				.content-one{
					margin-top: 50rpx;
					.time{
						font-size: 36rpx;
					}
					.address{
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
					}
					
				}
				.money{
					font-size: 40rpx;
					color: #ff743b;
					line-height: 200rpx;
				}
			}
			
			.two{
				display: flex;
				font-size: 24rpx;
				justify-content: space-between;
				image{
					width: 50rpx;
				}
			}
		}
	}
</style>
